<template>
	<uxt-multi-selector
		:options="options"
		:labelField="labelField"
		:name="name"
		v-model="value1"
		:position="position"
        :clearable="clearable"
        :disabled="disabled"
		@change="handleChange"
		@opened="focus = true"
		@closed="focus = false"
        @cancel="$emit('cancel', $event)"
        @clear="$emit('clear', $event)"
	>
		<uxt-bar
			:classes="classes"
			:styles="styles"
			:color="color"
			:bg-color="bgColor"
			:icon="icon"
			:title="title"
			:content="content2"
			:desc="desc"
			:arrow="arrow"
			:box="box"
			:round="round"
			:radius="radius"
			:focus="focus"
		>
			<template slot="left">
				<text
				    class="text-red"
				    v-if="star"
				>*</text>
				<slot name="left"></slot>
			</template>
			<template slot="right">
				<slot name="right"></slot>
			</template>
		</uxt-bar>
	</uxt-multi-selector>
</template>

<script>
import baseMixin from '../mixins/base.js'
import barMixin from '../mixins/bar.js'
import rrMixin from '../mixins/rr.js'
import uxtMultiSelector from './uxt-multi-selector.vue'
import uxtBar from './uxt-bar.vue'

export default {
	name: 'uxt-multi-selector-bar',
	mixins: [baseMixin, barMixin, rrMixin],
	components: {
		uxtMultiSelector,
		uxtBar
	},
	props: {
		name: {
			type: String
		},
		value: {
			type: Array,
            default() {
                return []
            }
		},
        // 红星
        star: {
            type: Boolean,
            default: false
        },
		// 弹出位置 bottom/center
		position: {
			type: String,
			default: 'bottom',
			validator(value) {
				return ['bottom', 'center'].includes(value)
			}
		},
		// Array<String> | Array<Object>
		options: {
			type: Array,
			default() {
				return []
			}
		},
		// options为Array<Object>，指定label字段
		labelField: {
			type: String,
			default: 'label'
		},
        clearable: {
            type: Boolean,
            default: false
        },
        disabled: {
            type: Boolean,
            default: false
        },
		bgColor: {
			default: 'white'
		},
		content: {
			default: '请选择'
		},
		arrow: {
			default: true
		}
	},
	data() {
		return {
			focus: false,
            value1: this.value
		}
	},
	computed: {
		content2() {
            let arrValue = this.value1.filter(item => Number.isInteger(item) && item >= 0 && item < this.options.length)
			if (arrValue.length === 0) {
				return this.content
			}
            return `已选择${arrValue.length}项`
		}
	},
    watch: {
        value(newVal, oldVal) {
            this.value1 = this.value
        }
    },
	methods: {
		handleChange(e) {
			this.$emit('change', e)
			this.$emit('input', e.detail.value)
		}
	}
}
</script>
